<template>
  <el-card class="wisplm-processor">
    <div slot="header" style="text-align: left">
      {{ title }}
    </div>
    <div style="text-align: left">
      {{ count }}
      <el-progress :percentage="(count / total) * 100" :show-text="false" :define-back-color="processorColor"/>
      <span style="text-align: left; color: #928f8f; font-size: 10px">{{ (count / total) * 100 }}% increase in {{
          rule
        }}</span>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "index",
  props: {
    title: {
      default: 'New Students',
    },
    count: {
      default: 245,
    },
    total: {
      default: 490,
    },
    rule: {
      default: '25 Days',
    },
    processorColor: {
      default: 'orange'
    },
  }
}
</script>

<style scoped>
.wisplm-processor {
    /*width: 30%;*/
  height: 125px;
  margin: 5px 0;
}
</style>
